<template>
    <div v-loading="loading" class="manage-container">
        <!-- 筛选器 -->
        <filter-data @filterSubmit="filterSubmit" />
        <basics-card>
            <div class="tips-wrap">
                <strong class="strong-room">
                    合作数量
                    <i class="i">126</i>
                </strong>
                <span class="common-link">
                    收保证金
                    <i class="line">12000元＞</i>
                </span>
                <span class="common-link">
                    退保证金
                    <i class="line">12000元＞</i>
                </span>
                <span class="common-link">
                    累计保证金
                    <i class="line">12000元＞</i>
                </span>
            </div>
            <manage-item :bgmData="[]" />
        </basics-card>

        <basics-card>
            <h5 class="h5">门店待办/我的待办</h5>
            <h6 class="h6">l 合同</h6>
            <manage-contract :bgmData="[]" />
            <h6 class="h6">l 财务</h6>
            <manage-finance :bgmData="[]" />
        </basics-card>
    </div>
</template>

<script>
import FilterData from '../filter-data.vue';
import BasicsCard from '@/components/Widget/basics-card.vue';
import ManageItem from '../manage/manage-item.vue';
import ManageContract from '../manage/manage-contract.vue';
import ManageFinance from '../manage/manage-finance.vue';

export default {
    components: { FilterData, BasicsCard, ManageItem, ManageContract, ManageFinance },
    data() {
        return {
            loading: true
        };
    },
    mounted() {
        this.loadData();
    },
    methods: {
        loadData() {
            this.loading = true;
            setTimeout(() => {
                this.loading = false;
            }, 1200);
        },
        filterSubmit() {
            this.loadData();
        }
    }
};
</script>

<style lang="scss" scoped>
.manage-container {
    height: calc(100% - 60px);
    overflow-x: hidden;
    overflow-y: auto;
    margin-top: 12px;
    .h5 {
        font-size: 16px;
        font-weight: 800;
        color: #165dff;
    }
    .h6 {
        font-size: 14px;
        font-weight: 600;
        color: #333;
        margin: 20px 0 10px 0;
    }
    .tips-wrap {
        display: flex;
        align-items: center;
        height: 30px;
        .strong-room {
            font-size: 15px;
            font-weight: 600;
            color: #1d2129;
            margin-right: 80px;
            .i {
                color: #f53f3f;
                font-style: normal;
            }
        }
        .common-link {
            font-size: 13px;
            font-weight: 500;
            color: #1d2129;
            margin-right: 60px;
            .line {
                color: #f53f3f;
                text-decoration: underline;
                font-style: normal;
                cursor: pointer;
            }
        }
    }
}
</style>
